﻿@page "/chart/multi-colored-line"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts
@using Newtonsoft.Json

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample shows the particulate levels in rainfall with multi-colored line series in the chart. Data points are enhanced with individual color and tooltip. </p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure each point in line type series. Multicolored line charts are used to represent time-dependent data to show the trends at equal intervals with their individual colors by using <code>PointColorMapping</code>.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the multi-colored line series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/line/#multicolored-line'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div align="center">
        <SfChart Title="Particulate Levels in Rainfall" Width="80%" Theme="@Theme">
            <ChartArea>
                <ChartAreaBorder Width="0"></ChartAreaBorder>
            </ChartArea>
            <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Years" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
                <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            </ChartPrimaryXAxis>
            <ChartPrimaryYAxis RangePadding="ChartRangePadding.None" Title="Particulate Matter(PM)" Minimum="4" Maximum="10">
                <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
                <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            </ChartPrimaryYAxis>
            <ChartLegendSettings Visible="false"></ChartLegendSettings>
            <ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>
            <ChartSeriesCollection>
                <ChartSeries DataSource="@ChartPoints" Name="Rainfall" XName="Period" YName="RainfallInfo" PointColorMapping="PointColor" Width="1.5" Type="ChartSeriesType.MultiColoredLine">
                </ChartSeries>
            </ChartSeriesCollection>
        </SfChart>
    </div>
</div>

@code{

    private string[] colors = {"red", "green", "deeppink", "crimson", "blue", "darkorange", "deepskyblue",
                             "mediumvioletred", "violet", "peru", "gray", "deeppink", "navy" };
    private Double[] chartJsonPoints = new Double[150];
    private Theme Theme { get; set; }
    public List<LineChartData> ChartPoints { get; set; } = new List<LineChartData>();

    protected override void OnInitialized()
    {
        chartJsonPoints = JsonConvert.DeserializeObject<Double[]>(System.IO.File.ReadAllText("./wwwroot/data/chart/rainfall-data.json"));
        for (int i = 0; i < chartJsonPoints.Length; i++)
        {
            ChartPoints.Add(new LineChartData
            {
                Period = new DateTime(2004, 1, 1).AddMonths(i),
                RainfallInfo = chartJsonPoints[i],
                PointColor = colors[(i / 16)]
            });
        }
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class LineChartData
    {
        public DateTime Period { get; set; }
        public double RainfallInfo { get; set; }
        public string PointColor { get; set; }
    }
}
